<script setup lang="ts">
import { ref } from 'vue'

// Services data
const services = [
  {
    id: 'payment-gateway',
    title: 'Payment Gateway',
    description: 'Our flagship payment processing solution that allows businesses to accept payments securely and efficiently.',
    icon: '💳',
    features: [
      'Multiple payment methods (credit cards, digital wallets, bank transfers)',
      'Seamless checkout experience with customizable UI',
      'Advanced fraud detection and prevention',
      'Real-time transaction monitoring and reporting',
      'Tokenization for secure recurring payments',
      'Multi-currency support with automatic conversion'
    ],
    pricing: {
      standard: {
        name: 'Standard',
        price: '2.9% + $0.30',
        features: [
          'All payment methods',
          'Basic fraud protection',
          'Standard support',
          'Next-day deposits'
        ]
      },
      pro: {
        name: 'Professional',
        price: '2.5% + $0.25',
        features: [
          'All Standard features',
          'Advanced fraud protection',
          'Priority support',
          'Same-day deposits',
          'Detailed analytics'
        ]
      },
      enterprise: {
        name: 'Enterprise',
        price: 'Custom',
        features: [
          'All Professional features',
          'Volume discounts',
          'Dedicated account manager',
          'Custom integration support',
          'Service level agreement'
        ]
      }
    }
  },
  {
    id: 'subscription-billing',
    title: 'Subscription Billing',
    description: 'Comprehensive subscription management solution for recurring revenue businesses.',
    icon: '🔄',
    features: [
      'Flexible subscription plans with custom pricing intervals',
      'Automated billing and invoicing',
      'Revenue recovery with smart dunning management',
      'Customer portal for self-service management',
      'Subscription analytics and metrics',
      'Proration handling for plan changes'
    ],
    pricing: {
      standard: {
        name: 'Standard',
        price: '$49/month',
        features: [
          'Up to 500 subscribers',
          'Basic subscription plans',
          'Email notifications',
          'Standard support'
        ]
      },
      pro: {
        name: 'Professional',
        price: '$99/month',
        features: [
          'Up to 2,000 subscribers',
          'Advanced subscription plans',
          'Dunning management',
          'Priority support',
          'Subscription analytics'
        ]
      },
      enterprise: {
        name: 'Enterprise',
        price: 'Custom',
        features: [
          'Unlimited subscribers',
          'Custom subscription logic',
          'Advanced revenue recovery',
          'Dedicated account manager',
          'API access'
        ]
      }
    }
  },
  {
    id: 'fraud-protection',
    title: 'Fraud Protection',
    description: 'AI-powered fraud detection and prevention system to protect your business from fraudulent transactions.',
    icon: '🛡️',
    features: [
      'Machine learning fraud detection algorithms',
      'Real-time transaction risk assessment',
      'Customizable risk thresholds',
      'Device fingerprinting and behavioral analysis',
      'Detailed fraud reports and insights',
      'Chargeback protection and management'
    ],
    pricing: {
      standard: {
        name: 'Standard',
        price: '$0.05/transaction',
        features: [
          'Basic fraud rules',
          'IP address verification',
          'Email risk assessment',
          'Standard reporting'
        ]
      },
      pro: {
        name: 'Professional',
        price: '$0.10/transaction',
        features: [
          'Advanced fraud algorithms',
          'Custom risk rules',
          'Device fingerprinting',
          'Behavioral analysis',
          'Priority support'
        ]
      },
      enterprise: {
        name: 'Enterprise',
        price: 'Custom',
        features: [
          'Custom ML models',
          'Integration with existing systems',
          'Dedicated fraud analyst',
          'Chargeback guarantee',
          '24/7 monitoring'
        ]
      }
    }
  },
  {
    id: 'global-payments',
    title: 'Global Payments',
    description: 'International payment processing solution supporting multiple currencies and localized payment methods.',
    icon: '🌎',
    features: [
      'Support for 135+ currencies',
      'Localized payment methods for 50+ countries',
      'Competitive exchange rates',
      'Regulatory compliance for different regions',
      'Multi-language checkout experiences',
      'Global tax handling'
    ],
    pricing: {
      standard: {
        name: 'Standard',
        price: '3.5% + $0.30',
        features: [
          'Major currencies',
          'Standard exchange rates',
          'Basic localization',
          'Standard support'
        ]
      },
      pro: {
        name: 'Professional',
        price: '3.0% + $0.30',
        features: [
          'All currencies',
          'Preferred exchange rates',
          'Advanced localization',
          'Local payment methods',
          'Priority support'
        ]
      },
      enterprise: {
        name: 'Enterprise',
        price: 'Custom',
        features: [
          'Custom pricing per country',
          'Optimized routing',
          'Full localization',
          'Dedicated support',
          'Custom reporting'
        ]
      }
    }
  }
]

// Selected pricing tier (for mobile view)
const selectedTier = ref('standard')

// Change pricing tier
const changeTier = (tier: string) => {
  selectedTier.value = tier
}
</script>

<template>
  <div class="services-page">
    <!-- Hero Section -->
    <section class="services-hero">
      <div class="container">
        <div class="services-hero-content">
          <h1>Our Payment Services</h1>
          <p>Comprehensive payment solutions to power your business growth</p>
        </div>
      </div>
    </section>

    <!-- Services List -->
    <section class="services-list section">
      <div class="container">
        <div v-for="service in services" :key="service.id" :id="service.id" class="service-item">
          <div class="service-header">
            <div class="service-icon">{{ service.icon }}</div>
            <h2>{{ service.title }}</h2>
            <p class="service-description">{{ service.description }}</p>
          </div>
          
          <div class="service-content">
            <!-- Features -->
            <div class="service-features">
              <h3>Key Features</h3>
              <ul class="features-list">
                <li v-for="feature in service.features" :key="feature">{{ feature }}</li>
              </ul>
            </div>
            
            <!-- Pricing -->
            <div class="service-pricing">
              <h3>Pricing Plans</h3>
              
              <!-- Mobile pricing tabs -->
              <div class="pricing-tabs mobile-only">
                <div class="tab-buttons">
                  <button 
                    v-for="(plan, tier) in service.pricing" 
                    :key="tier"
                    :class="['tab-button', { active: selectedTier === tier }]"
                    @click="changeTier(tier)"
                  >
                    {{ plan.name }}
                  </button>
                </div>
                
                <div class="tab-content">
                  <div 
                    v-for="(plan, tier) in service.pricing" 
                    :key="tier"
                    :class="['pricing-plan mobile', { active: selectedTier === tier }]"
                  >
                    <h4 class="plan-name">{{ plan.name }}</h4>
                    <div class="plan-price">{{ plan.price }}</div>
                    <ul class="plan-features">
                      <li v-for="feature in plan.features" :key="feature">{{ feature }}</li>
                    </ul>
                    <button class="btn btn-primary plan-cta">Get Started</button>
                  </div>
                </div>
              </div>
              
              <!-- Desktop pricing grid -->
              <div class="pricing-grid desktop-only">
                <div 
                  v-for="(plan, tier) in service.pricing" 
                  :key="tier"
                  class="pricing-plan"
                  :class="{ featured: tier === 'pro' }"
                >
                  <div class="plan-header">
                    <h4 class="plan-name">{{ plan.name }}</h4>
                    <div class="plan-price">{{ plan.price }}</div>
                  </div>
                  <ul class="plan-features">
                    <li v-for="feature in plan.features" :key="feature">{{ feature }}</li>
                  </ul>
                  <button class="btn plan-cta" :class="tier === 'pro' ? 'btn-primary' : 'btn-outline'">Get Started</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- CTA Section -->
    <section class="services-cta section">
      <div class="container">
        <div class="cta-box">
          <h2>Need a customized solution?</h2>
          <p>Our payment experts are ready to help you build the perfect payment stack for your business.</p>
          <button class="btn btn-primary">Contact Sales</button>
        </div>
      </div>
    </section>
    
    <!-- FAQ Section -->
    <section class="faq-section section">
      <div class="container">
        <div class="section-header text-center">
          <h2>Frequently Asked Questions</h2>
          <p>Find answers to common questions about our payment services</p>
        </div>
        
        <div class="faq-list">
          <details class="faq-item">
            <summary>How long does integration take?</summary>
            <div class="faq-answer">
              <p>Most businesses can integrate our payment gateway in less than a day using our SDKs and documentation. For more complex integrations, our support team is available to help expedite the process. Enterprise customers receive dedicated integration support.</p>
            </div>
          </details>
          
          <details class="faq-item">
            <summary>What payment methods are supported?</summary>
            <div class="faq-answer">
              <p>We support all major credit and debit cards (Visa, Mastercard, American Express, Discover), digital wallets (Apple Pay, Google Pay, PayPal), and local payment methods in supported countries. Additionally, we support bank transfers, ACH, and alternative payment methods.</p>
            </div>
          </details>
          
          <details class="faq-item">
            <summary>How do you handle data security and compliance?</summary>
            <div class="faq-answer">
              <p>We're PCI DSS Level 1 compliant, the highest level of certification. All sensitive payment data is encrypted using industry-leading standards. We also maintain compliance with GDPR, CCPA, and other regional data protection regulations. Our security team constantly monitors for threats and vulnerabilities.</p>
            </div>
          </details>
          
          <details class="faq-item">
            <summary>What happens if I need to dispute a chargeback?</summary>
            <div class="faq-answer">
              <p>Our system provides automated tools to help you respond to and manage chargebacks efficiently. We provide evidence collection templates and best practices to maximize your chances of winning disputes. Professional and Enterprise plans include enhanced chargeback protection and management features.</p>
            </div>
          </details>
          
          <details class="faq-item">
            <summary>Can I customize the checkout experience?</summary>
            <div class="faq-answer">
              <p>Yes, our checkout solutions are highly customizable. You can use our hosted pages with your branding or integrate our API directly into your custom checkout experience. We provide SDKs for web, iOS, and Android to help you create seamless payment flows that match your brand identity.</p>
            </div>
          </details>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* Services Hero Section */
.services-hero {
  padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-12);
  background: linear-gradient(135deg, var(--primary-800), var(--primary-700));
  color: white;
  text-align: center;
}

.services-hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.services-hero-content p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
  color: var(--neutral-200);
}

/* Services List */
.service-item {
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--neutral-200);
}

.service-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.service-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  display: inline-block;
}

.service-header h2 {
  font-size: 2rem;
  margin-bottom: var(--space-4);
  color: var(--primary-800);
}

.service-description {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.service-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Service Features */
.service-features h3,
.service-pricing h3 {
  margin-bottom: var(--space-6);
  font-size: 1.5rem;
  color: var(--text-primary);
}

.features-list {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.features-list li {
  padding: var(--space-3) 0;
  padding-left: var(--space-8);
  position: relative;
}

.features-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success-500);
  font-weight: bold;
}

/* Pricing */
.pricing-tabs {
  margin-bottom: var(--space-6);
}

.tab-buttons {
  display: flex;
  gap: 1px;
  background-color: var(--neutral-200);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-6);
  padding: 2px;
}

.tab-button {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-radius: calc(var(--border-radius) - 2px);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-button.active {
  background-color: white;
  color: var(--primary-700);
}

.pricing-plan.mobile {
  display: none;
  animation: fadeIn 0.3s ease;
}

.pricing-plan.mobile.active {
  display: block;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.pricing-plan {
  border: 1px solid var(--neutral-200);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.pricing-plan.featured {
  border-color: var(--primary-400);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
  position: relative;
}

.pricing-plan.featured::before {
  content: 'Popular';
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--primary-600);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.plan-header {
  padding: var(--space-6);
  background-color: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
  text-align: center;
}

.plan-name {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}

.plan-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-700);
}

.plan-features {
  list-style-type: none;
  padding: var(--space-6);
  margin: 0;
}

.plan-features li {
  padding: var(--space-2) 0;
  position: relative;
  padding-left: var(--space-6);
}

.plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success-500);
  font-weight: bold;
}

.plan-cta {
  margin: var(--space-4) var(--space-6) var(--space-6);
  width: calc(100% - var(--space-12));
}

/* CTA Section */
.services-cta {
  background-color: var(--neutral-50);
}

.cta-box {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
  color: white;
  text-align: center;
  padding: var(--space-10);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cta-box h2 {
  margin-bottom: var(--space-4);
  font-size: 2rem;
}

.cta-box p {
  margin-bottom: var(--space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--neutral-200);
}

.cta-box .btn {
  padding: var(--space-3) var(--space-8);
  font-size: 1.1rem;
  background-color: white;
  color: var(--primary-700);
}

.cta-box .btn:hover {
  background-color: var(--neutral-100);
}

/* FAQ Section */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.faq-item summary {
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  font-weight: 600;
  position: relative;
  list-style: none;
  transition: background-color 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: var(--space-6);
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item[open] summary {
  background-color: var(--neutral-50);
}

.faq-answer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--neutral-200);
}

.faq-answer p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Mobile/Desktop specific elements */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

/* Responsive */
@media (min-width: 768px) {
  .service-content {
    flex-direction: row;
    align-items: flex-start;
  }
  
  .service-features,
  .service-pricing {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: grid;
  }
}
</style>